<template>
    <div class="file-upload-container">
        <a-tabs default-active-key="1">
            <a-tab-pane key="1">
                <span slot="tab">上传资源</span>
                <a-upload
                        name="file"
                        :multiple="true"
                        action="http://192.168.109.135:5210/resource/resourceUpload"
                        @change="handleUploadChange"
                        :file-list="fileList"
                >
                    <a-button type="primary" ghost
                              style="width: 475px;height: 50px; margin-left: 200px; margin-bottom: 10px;">
                        <a-icon type="upload"/>
                        上传资源 大小 < 100M
                    </a-button>
                </a-upload>
                <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                    <a-form-item label="资源名称：">
                        <a-input placeholder="资源名称" v-model="resourceName"/>
                    </a-form-item>
                    <a-form-item label="所属分类：">
                        <a-cascader
                                :options="options"
                                :display-render="displayRender"
                                expand-trigger="hover"
                                placeholder="Please select"
                                @change="onChange"
                        />
                    </a-form-item>
                    <a-form-item label="所属积分：">
                        <a-select placeholder="选择该资源所需要的积分数"
                                  @change="handleSelectChange">
                            <a-select-option value="male">
                                male
                            </a-select-option>
                            <a-select-option value="female">
                                female
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="资源标签：">
                        <div>
                            <template v-for="(tag, index) in tags">
                                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                                    <a-tag :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                                        {{ `${tag.slice(0, 20)}...` }}
                                    </a-tag>
                                </a-tooltip>
                                <a-tag v-else :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                                    {{ tag }}
                                </a-tag>
                            </template>
                            <a-input
                                    v-if="inputVisible"
                                    ref="input"
                                    type="text"
                                    size="small"
                                    :style="{ width: '78px' }"
                                    :value="inputValue"
                                    @change="handleInputChange"
                                    @blur="handleInputConfirm"
                                    @keyup.enter="handleInputConfirm"
                            />
                            <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                                <a-icon type="plus"/>
                                New Tag
                            </a-tag>
                        </div>
                    </a-form-item>
                    <a-form-item label="资源描述：">
                        <a-input style="height: 50px;" placeholder="资源描述"/>
                    </a-form-item>

                    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                        <a-button @click="uploadFile" type="danger" html-type="submit">
                            提交
                        </a-button>
                    </a-form-item>
                </a-form>

            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
    export default {
        name: "upload-resources",
        data() {
            return {
                formLayout: 'horizontal',
                form: this.$form.createForm(this, {name: 'coordinated'}),
                tags: [],
                inputVisible: false,
                inputValue: '',
                resourceName: '',
                headers: '',
                fileList: [],
                options: [
                    {
                        value: 'zhejiang',
                        label: 'Zhejiang',
                        children: [
                            {
                                value: 'hangzhou',
                                label: 'Hangzhou',
                                children: [
                                    {
                                        value: 'xihu',
                                        label: 'West Lake',
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        value: 'jiangsu',
                        label: 'Jiangsu',
                        children: [
                            {
                                value: 'nanjing',
                                label: 'Nanjing',
                                children: [
                                    {
                                        value: 'zhonghuamen',
                                        label: 'Zhong Hua Men',
                                    },
                                ],
                            },
                        ],
                    },
                ],

            };
        },
        methods: {
            handleSubmit(e) {

            },
            handleSelectChange(value) {

            },
            handleClose(removedTag) {
                const tags = this.tags.filter(tag => tag !== removedTag);
                console.log(tags);
                this.tags = tags;
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(function () {
                    this.$refs.input.focus();
                });
            },

            handleInputChange(e) {
                this.inputValue = e.target.value;
            },

            handleInputConfirm() {
                const inputValue = this.inputValue;
                let tags = this.tags;
                if (inputValue && tags.indexOf(inputValue) === -1) {
                    tags = [...tags, inputValue];
                }
                console.log(tags);
                Object.assign(this, {
                    tags,
                    inputVisible: false,
                    inputValue: '',
                });
            },
            handleUploadChange(info) {
                let fileList = [...info.fileList];

                // 1. Limit the number of uploaded files
                //    Only to show two recent uploaded files, and old ones will be replaced by the new
                fileList = fileList.slice(-1);

                // 2. read from response and show file link
                fileList = fileList.map(file => {
                    if (file.response) {
                        // Component will show file.url as link
                        file.url = file.response.url;
                    }
                    return file;
                });

                this.fileList = fileList;
                console.log(fileList)
                this.resourceName = fileList[0].name;
            },

            uploadFile() {

            },
            onChange(value) {
                console.log(value);
            },
            displayRender({labels}) {
                return labels[labels.length - 1];
            },
        }
    }
</script>

<style scoped>
</style>
